<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>计算属性</title>
</head>
<body>
	<div id="demo">
		<input type="" name="" v-model = "firstName"><br/>
		<input type="" name="" v-model = "lastName"><br/>
		{{fullName}}<br/>
		<input type="" name="" v-model = "example0"><br/>



		<input type="" name="" v-model="fullName">
	</div>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
		  	el: '#demo',
		  	data: {
			    firstName: 'Foo',
			    lastName: 'Bar',
			    // fullName: 'Foo Bar',
			    example0: ""
			},
/*		 	watch: {
		  	  	firstName: function (val) {
			      	this.fullName = val + ' ' + this.lastName
			      	console.log(val)
		    	},
		    	lastName: function (val) {
		      		this.fullName = this.firstName + ' ' + val
		    	},
	    		example0(curVal,oldVal){
　　　　　　　　	console.log(curVal,oldVal);
　　　　　　　　},
		  	}




		  	//通过computed得到的值不能在data中重复出现
		  	computed: {
		  		fullName:function(){
		  			return this.firstName + this.lastName
		  		}
		  	},
*/







		  	// 计算属性出来的值，要直接改变该值，需要通过get方法，否则会报错
 		  	computed: {
 		  		fullName:{
 		  			get:function(c){
 		  				return this.firstName + this.lastName
 		  			},
 		  			set:function(c){
 		  				console.log(c)
 		  			}
 		  		}
 		  	},
 		  	watch:{
 		  		fullName:function(c,o){
 		  			console.log(c,o)
 		  		}
 		  	}
		})

	</script>
</body>
</html>